<template>
	<view class="addAd p30">
		<view class="publishCon">
			<view class="pubTit">
				<up-input placeholder="请输入标题" border="none" v-model="title"></up-input>
			</view>
			<view class="border mb30"></view>
			<view class="pubTit">
				<up-input placeholder="请输入链接地址" border="none" v-model="link"></up-input>
			</view>
			<view class="border mb30"></view>
			<view class="pubTit">
				<up-input placeholder="请输入字体颜色" border="none" v-model="color"></up-input>
			</view>
			<view class="border mb30"></view>
			<view class="pubTit">
				<up-input placeholder="请输入背景颜色" border="none" v-model="backgroundColor"></up-input>
			</view>
			<view class="border mb30"></view>
			<view class="pubTit">
				<up-input placeholder="请输入跳转链接" border="none" v-model="suffix"></up-input>
			</view>
			<view class="border mb30"></view>
			<view class="pubSet dis mt30">
				<view class="setL dis">
					<view class="setTit">类型</view>
				</view>
				<view class="setR dis" @click="openTheme(0)">
					<view class="setRT">{{ type ? type : '请选择类型' }}</view>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="border mb30"></view>
			<view class="pubSet dis mt30">
				<view class="setL dis">
					<view class="setTit">位置</view>
				</view>
				<view class="setR dis" @click="openTheme(1)">
					<view class="setRT">{{ position ? position : '请选择位置' }}</view>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="border mb30"></view>
			<view class="pubImg" @click="uploadImageFun">
				<view class="imgDom dis" v-if="!imageUrl">
					<view class="imgItem imgItemUp dis">
						<view class="upIcon">
							<image src="/pages/static/11.png" mode=""></image>
						</view>
					</view>
				</view>
				<image v-if="imageUrl" :src="imageUrl" mode="aspectFill"></image>
				<view v-if="imageUrl" class="offImg" @click.stop="delImg()">x</view>
			</view>
		</view>
		<view class="but" @click="addAd">保存</view>
		<up-action-sheet
			:actions="sheetOptions"
			:title="sheetTit"
			:show="sheetShow"
			:round="15"
			@select="selectSheet"
			:closeOnClickOverlay="true"
			@close="closeSheet"
			cancelText="取消"
		></up-action-sheet>
	</view>
</template>

<script setup>
import { addAdvertisement2, getAdInfo } from '@/config/api.js';
import { uploadImage } from '@/util/util.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
const schoolIds = ref({});
onLoad((options) => {
	console.log('options', options);
	schoolIds.value = options.schoolId;
});
onShow(() => {});

// 新增
const title = ref('');
const imageUrl = ref('');
const link = ref('');
const type = ref('');
const position = ref('');
const color = ref('');
const backgroundColor = ref('');
const suffix = ref('');
const addAd = async () => {
	const data = {
		imageUrl: imageUrl.value,
		title: title.value,
		link: link.value,
		type: type.value,
		position: position.value,
		color: color.value,
		backgroundColor: backgroundColor.value,
		suffix: suffix.value
	};
	const res = await addAdvertisement2(schoolIds.value, data);
	console.log(res);
	if (res.code == 0) {
		uni.showToast({
			title: '添加成功',
			icon: 'success'
		});
		setTimeout(() => {
			uni.navigateBack({
				delta: 1
			});
		}, 2000);
	}
};
const uploadImageFun = async () => {
	if (imageUrl.value) return;
	const res = await uploadImage();
	console.log(res);
	if (res.code == 0) {
		imageUrl.value = res.data.imgUrl;
	}
};
const delImg = () => {
	imageUrl.value = '';
};

//弹窗
const sheetOptions = ref([]);
const sheetShow = ref(false);
const sheetTit = ref('');
const sheetType = ref(0); // 类型 0  位置 1
const selectSheet = (item) => {
	if (sheetType.value == 0) {
		type.value = item.name;
	} else {
		position.value = item.name;
	}
};
const closeSheet = () => {
	sheetShow.value = false;
};
const openTheme = (type) => {
	sheetType.value = type;
	if (type == 0) {
		sheetOptions.value = options0;
	} else {
		sheetOptions.value = options1;
	}
	sheetShow.value = true;
};
const options0 = [
	{ label: '轮播图', name: '轮播图' },
	{ label: '公告', name: '公告' },
	{ label: '首页广告墙', name: '首页广告墙' }
];
const options1 = [
	{ label: '首页', name: '首页' },
	{ label: '帖子详情', name: '帖子详情' },
	{ label: '跑腿列表', name: '跑腿列表' },
	{ label: '个人中心', name: '个人中心' }
];
</script>

<style scoped lang="scss">
.addAd {
	width: 100%;
	.publishCon {
		position: relative;
		padding: 30rpx;
		width: 690rpx;
		background: #ffffff;
		border-radius: 24rpx;
		z-index: 1;
		.pubTit {
			font-size: 28rpx;
		}
		.pubSet {
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.setL {
				.setIcon {
					margin-right: 16rpx;
					width: 40rpx;
					height: 40rpx;
				}
				.setTit {
					font-size: 28rpx;
					color: #000000;
				}
			}
			.setRT {
				margin-top: -5rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
		.pubImg {
			position: relative;
			width: 100%;
			height: 202rpx;
			background: #f4f5fe;
			border-radius: 16rpx;
			overflow: hidden;
			.imgDom {
				position: relative;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 202rpx;
				background: #f4f5fe;
				border-radius: 16rpx;
				overflow: hidden;
				.imgItemUp {
					justify-content: center;
					align-items: center;
				}
				.upIcon {
					width: 108rpx;
					height: 108rpx;
				}
			}
			.offImg {
				position: absolute;
				right: 0;
				top: 0;
				width: 40rpx;
				height: 40rpx;
				line-height: 30rpx;
				font-size: 26rpx;
				text-align: center;
				border-radius: 0rpx 10rpx 0rpx 40rpx;
				background: #000;
				color: #fff;
			}
		}
	}
	.border {
		margin-top: 30rpx;
		width: 630rpx;
		height: 0rpx;
		border-top: 2rpx solid #f5f6f8;
	}
	.but {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 690rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		background: linear-gradient(44deg, #5384f7 0%, #5744e8 100%);
		border-radius: 16rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #ffffff;
	}
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.u-swipe-action-item__right__button__wrapper {
	background-color: #e63f31 !important;
}
.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
</style>
